<template>
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>公文审批</span>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="待我审批" name="pending">
            <el-table
              v-loading="listLoading"
              :data="pendingList"
              element-loading-text="加载中..."
              border
              fit
              highlight-current-row
            >
              <el-table-column align="center" label="ID" width="80">
                <template slot-scope="scope">
                  {{ scope.row.id }}
                </template>
              </el-table-column>
              <el-table-column width="180px" align="center" label="日期">
                <template slot-scope="scope">
                  <span>{{ scope.row.createTime }}</span>
                </template>
              </el-table-column>
              <el-table-column width="120px" align="center" label="提交人">
                <template slot-scope="scope">
                  {{ scope.row.author }}
                </template>
              </el-table-column>
              <el-table-column width="100px" label="标题">
                <template slot-scope="scope">
                  {{ scope.row.title }}
                </template>
              </el-table-column>
              <el-table-column width="100px" align="center" label="紧急程度">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.urgency | urgencyFilter">{{ scope.row.urgency | urgencyLabel }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="200">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleView(scope.row)"
                  >
                    查看
                  </el-button>
                  <el-button
                    size="mini"
                    type="success"
                    @click="handleApprove(scope.row)"
                  >
                    通过
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleReject(scope.row)"
                  >
                    拒绝
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="我已审批" name="approved">
            <el-table
              v-loading="listLoading"
              :data="approvedList"
              element-loading-text="加载中..."
              border
              fit
              highlight-current-row
            >
              <el-table-column align="center" label="ID" width="80">
                <template slot-scope="scope">
                  {{ scope.row.id }}
                </template>
              </el-table-column>
              <el-table-column width="180px" align="center" label="日期">
                <template slot-scope="scope">
                  <span>{{ scope.row.createTime }}</span>
                </template>
              </el-table-column>
              <el-table-column width="120px" align="center" label="提交人">
                <template slot-scope="scope">
                  {{ scope.row.author }}
                </template>
              </el-table-column>
              <el-table-column width="100px" label="标题">
                <template slot-scope="scope">
                  {{ scope.row.title }}
                </template>
              </el-table-column>
              <el-table-column width="100px" align="center" label="我的审批">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.myApproval | approvalFilter">{{ scope.row.myApproval }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column width="100px" align="center" label="当前状态">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleView(scope.row)"
                  >
                    查看
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-card>
  
      <!-- 审批对话框 -->
      <el-dialog :title="approvalTitle" :visible.sync="dialogVisible" width="30%">
        <el-form :model="approvalForm" label-width="80px">
          <el-form-item label="审批意见">
            <el-input type="textarea" :rows="4" v-model="approvalForm.comment" placeholder="请输入审批意见"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitApproval">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    name: 'DocumentApproval',
    filters: {
      statusFilter(status) {
        const statusMap = {
          '审批中': 'warning',
          '已通过': 'success',
          '已拒绝': 'danger'
        }
        return statusMap[status]
      },
      urgencyFilter(urgency) {
        const urgencyMap = {
          'normal': 'info',
          'urgent': 'warning',
          'very_urgent': 'danger'
        }
        return urgencyMap[urgency]
      },
      urgencyLabel(urgency) {
        const urgencyMap = {
          'normal': '普通',
          'urgent': '紧急',
          'very_urgent': '特急'
        }
        return urgencyMap[urgency]
      },
      approvalFilter(approval) {
        const approvalMap = {
          '通过': 'success',
          '拒绝': 'danger'
        }
        return approvalMap[approval]
      }
    },
    data() {
      return {
        activeName: 'pending',
        pendingList: [
          {
            id: 1,
            title: '关于公司年度计划的通知',
            author: '张三',
            createTime: '2023-01-01 10:00:00',
            urgency: 'normal',
            status: '审批中'
          },
          {
            id: 2,
            title: '关于部门调整的通知',
            author: '李四',
            createTime: '2023-01-02 11:00:00',
            urgency: 'urgent',
            status: '审批中'
          }
        ],
        approvedList: [
          {
            id: 3,
            title: '关于员工福利调整的通知',
            author: '王五',
            createTime: '2023-01-03 12:00:00',
            myApproval: '通过',
            status: '已通过'
          },
          {
            id: 4,
            title: '关于年终奖发放的通知',
            author: '赵六',
            createTime: '2023-01-04 13:00:00',
            myApproval: '拒绝',
            status: '已拒绝'
          }
        ],
        total: 4,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 10
        },
        dialogVisible: false,
        approvalTitle: '',
        approvalForm: {
          id: null,
          action: '',
          comment: ''
        },
        currentRow: null
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        // 模拟API调用
        setTimeout(() => {
          this.listLoading = false
        }, 1000)
        
        // 实际项目中应该调用API
        // fetchApprovalList(this.activeName, this.listQuery).then(response => {
        //   if (this.activeName === 'pending') {
        //     this.pendingList = response.data.items
        //   } else {
        //     this.approvedList = response.data.items
        //   }
        //   this.total = response.data.total
        //   this.listLoading = false
        // })
      },
      handleClick(tab) {
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
      handleView(row) {
        this.$router.push(`/document/view/${row.id}`)
      },
      handleApprove(row) {
        this.approvalTitle = '审批通过'
        this.approvalForm = {
          id: row.id,
          action: 'approve',
          comment: ''
        }
        this.currentRow = row
        this.dialogVisible = true
      },
      handleReject(row) {
        this.approvalTitle = '审批拒绝'
        this.approvalForm = {
          id: row.id,
          action: 'reject',
          comment: ''
        }
        this.currentRow = row
        this.dialogVisible = true
      },
      submitApproval() {
        // 模拟API调用
        this.$message({
          type: 'success',
          message: this.approvalForm.action === 'approve' ? '审批通过成功' : '审批拒绝成功'
        })
        this.dialogVisible = false
        
        // 更新列表
        const index = this.pendingList.findIndex(item => item.id === this.currentRow.id)
        if (index !== -1) {
          this.pendingList.splice(index, 1)
          this.approvedList.unshift({
            ...this.currentRow,
            myApproval: this.approvalForm.action === 'approve' ? '通过' : '拒绝',
            status: this.approvalForm.action === 'approve' ? '已通过' : '已拒绝'
          })
        }
        
        // 实际项目中应该调用API
        // submitApproval(this.approvalForm).then(() => {
        //   this.$message({
        //     type: 'success',
        //     message: this.approvalForm.action === 'approve' ? '审批通过成功' : '审批拒绝成功'
        //   })
        //   this.dialogVisible = false
        //   this.getList()
        // })
      }
    }
  }
  </script>
  
  <style scoped>
  .pagination-container {
    margin-top: 30px;
  }
  </style>